<template>
    <div class="content">
        <!-- 标题栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
      z-index="88"
    />
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in galleryList" :key="item.id">
            <img :src="item.img_url" alt="">
        </van-swipe-item>
    </van-swipe>
    <!-- 退款退货 -->
    <div class="tui">
        <span>30天无忧退货</span>
        <span>48小时快速退款</span>
        <span>满88元免邮费</span>
    </div>
    <div class="info">
        <p class="info-t">{{InfoList.name}}</p>
        <p class="info-c">{{InfoList.goods_brief}}</p>
        <p class="info-b">￥{{InfoList.retail_price}}</p>
    </div>
    <!-- 规格数量 -->
     <div class="num" @click="hidess">
        <span class="num-t">请选择规格数量</span>
        <span class="num-b"><van-icon name="arrow" /></span>
    </div> 
    <div class="parameter">
        <p class="parameter-t">商品参数</p>
        <div class="parameter-s" v-for="(item,index) in attributeList" :key="index">
            <span class="parameter-s-l">{{item.name}}</span>
            <span class="parameter-s-r">{{item.value}}</span>
        </div>
    </div>
    <!-- 图片展示 -->
    <div class="desc" v-html="InfoList.goods_desc">
        {{InfoList.goods_desc}}
    </div>
    <div class="problem">
        <div class="problem-head">
            <span class="line"></span>
            <span class="problem-head-c">常见问题</span>
            <span class="line"></span>
        </div>
        <div class="problem-content">
            <div class="problem-b" v-for="item in issueList" :key="item.id" >
            <p class="problem-b-t">{{item.question}}</p>
            <p class="problem-b-b">{{item.answer}}</p>
        </div>
        </div>
        
    </div>
    <div class="commodity">
         <div class="commodity-head">
            <span class="line"></span>
            <span class="commodity-head-c">大家都在看</span>
            <span class="line"></span>
        </div>
        <div class="commodity-center">
            <div class="items" v-for="item in productList" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <p class="commodity-center-t">{{item.name}}</p>
                <p class="commodity-center-b">￥{{item.retail_price}}</p>
            </div>
        </div>
    </div>
    <!--加入购物车 -->
    <van-goods-action class="incoButtontt"> 
        <van-button type="default" @click="iconClick" class="incoButton-t" ><span :class="{incoButtontt}">✩</span></van-button>
        <van-button type="default" @click="carCLick" class="incoButton-b">
                <van-goods-action-icon icon="cart-o"  :badge="total" />
        </van-button>
        <van-button type="default" @click="BuyNow">立即购买</van-button>
        <van-button type="danger" @click="Addcar">加入购物车</van-button>
    </van-goods-action>

    <!-- 隐藏部分 -->
    <van-popup v-model="hides" position="bottom" :style="{ height: '45%' }" z-index='77' >
    <div class="cars">
        <div class="top">
            <div class="photo">
                <img :src="InfoList.primary_pic_url" alt="">
            </div>
            <div class="top-r">
                <p class="top-r-t" @click="topClick">X</p>
                <p class="top-r-c">价格￥{{InfoList.retail_price}}</p>
                <p class="top-r-b">请选择数量</p>
            </div>
        </div>
        <div class="bottom">
            <p>数量</p>
            <van-stepper v-model="value" />
        </div>
    </div>
    </van-popup>
    </div>
</template>
<script>
import { detailactions } from "@/api/home/detailactions.js";
import {cartList } from "@/api/cart/cart.js";
import {addcollect} from "@/api/home/collect.js"
import {addCart} from "@/api/cart/cart.js"
export default {
    data(){
        return{
            id:'',
            // 轮播
            galleryList:[],
            // 商品介绍
            InfoList:[],
            // 商品参数
            attributeList:[],
            //关于运费
            issueList:[],
            //下面的商品列表
            productList:[],
            hides:false,
            //商品有多少
            value:1,
            total:0,
            incoButtontt:false,
        }
    },
    methods:{
        getdetailactions(){
            //商品信息
            detailactions({
                id:localStorage.getItem('Id'),
                openId:localStorage.getItem('openId')
            }).then(res=>{
                console.log(res)
                this.galleryList=res.gallery;
                this.InfoList=res.info;
                this.attributeList=res.attribute;
                this.productList=res.productList;
                this.issueList=res.issue;
                // console.log(this.issueList)
            });
            //添加收藏
            addcollect({
                goodsId:this.id,
                openId:localStorage.getItem('openId')
            }).then(res=>{
                console.log(res)
            });
            //添加到购物车
            addCart({
                goodsId:this.id,
                openId:localStorage.getItem('openId'),
                number:this.value
            }).then(res=>{
                console.log(res)
            }),
            cartList({
                openId:localStorage.getItem('openId'),
            }).then(res=>{
                // console.log(res.data.length)

                res.data.forEach((item,index) => {
                    // console.log(item,index)
                    this.total+=item.number;
                    // console.log(this.total)
                });
               
                console.log(res.data)
            })
        },
        //返回上一页
        onClickLeft(){
            this.$router.go(-1);
        },
        //规格数量 一=亦无用
        hidess(){
            this.hides=true;
        },
        //立即购买
        BuyNow(){
            this.hides=true;
        },
        //加入购物车
        Addcar(){
            this.hides=true;
            this.id=this.InfoList.id;
           //添加到购物车
            addCart({
                goodsId:this.id,
                openId:localStorage.getItem('openId'),
                number:this.value
            }).then(res=>{
                console.log(res);
                  //商品信息
            })     
            this.value=1;
            this.hides=false;
        },
        //点击x 返回页面
        topClick(){
            this.hides=false;
        },
        //收藏按钮
        iconClick(event){
            // if()
            this.incoButtontt=!this.incoButtontt;
            this.id=this.InfoList.id;
            //添加收藏
            addcollect({
                goodsId:this.id,
                openId:localStorage.getItem('openId')
            }).then(res=>{
                console.log(res)
            });
            
        },
        //回到购物车
        carCLick(){
            this.$router.push({name:'cart'})
        }    
    },
    created(){
        this.getdetailactions()
    }
}
</script>
<style  scoped>
.desc>>>img{
    width: 100%;
}
 .incoButtontt{
            color: #b4282d;
        }
</style>
<style lang="scss" scoped>
.content{
    width: 100%;
    background-color: #f4f4f4;
    .van-swipe{
    .van-swipe-item{
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .tui{
      display: flex;
      justify-content: space-between;
      padding:15px 10px
    }
    .info{
        width: 100%;
        height: 130px;
        text-align: center;
        background-color: #fff;
        margin-top: 10px;
        .info-t{ 
            width: 100%;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
            font-weight:bold ;
        }
        .info-c{
            width: 100%;
            height:16px;
            // line-height: 45px;
            font-size: 12px;
            color: #999;
        }
        .info-b{
            width: 100%;
            font-size: 14px;
            color: #fd4e4e;
             font-weight:bold ;
        }
    }
    .num{
        width: 100%;
        height: 55px;
        // padding:0 10px;
        line-height: 55px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        // margin-top: 5px;
        .num-t{
            margin-left: 10px;
        }
        .num-b{
            font-size: 16px;
            margin-right: 20px;
        }
    }
    .parameter{
        // width: 100%;
        // height: 260px;
        background-color: #fff;
        margin-top: 10px;
        padding:10px 10px;
        .parameter-t{
            font-size: 16px;
        }
        .parameter-s{
            height: 35px;
            padding: 10px 10px;
            background-color: #f4f4f4;
            font-size: 12px;
            margin-bottom: 10px;
            line-height: 35px;
            // display: flex;
            // justify-content: space-around;
            .parameter-s-l{
                float: left;
                width: 20%;
                margin-right: 10px;
                color: #999; 
            }
            .parameter-s-r{
                width: 75%;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .desc{
        width: 100%;
    }
    .problem{
        width: 100%;
        height: 350px;
        background-color: #fff;
        margin-top: 10px;
        
     .problem-head{
         width: 60%;
         height: 50px;
         line-height:50px;
         margin: 0 auto;
         text-align: center;
         display: flex;
         justify-content: space-evenly;
         align-items: center;
         .line{
             width:50px;
             height:2px;
             line-height:50px;
             background-color: #dfdbdb;
         }
         .problem-head-c{

         }
     }   
     .problem-content{
         width: 90%;
         margin: 0 auto;
        
         .problem-b{
        width: 100%;     
            .problem-b-t{

         }
            .problem-b-b{
                width: 95%;
                margin: 0 auto;
                color: #999;
         }
         }
         
     }  
    }
    .commodity{
         width: 100%;
        // height: 350px;
        background-color: #fff;
        margin-top: 30px;
        margin-bottom:50px;
        .commodity-head{
         width: 60%;
         height: 50px;
         line-height:50px;
         margin: 0 auto;
         text-align: center;
         display: flex;
         justify-content: space-evenly;
         align-items: center;
         .line{
             width:50px;
             height:2px;
             line-height:50px;
             background-color: #dfdbdb;
         }
        }
       .commodity-center{
           width: 100%;
           background-color: #f4f4f4;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        //    margin-top: 10px;
        .items{
            background-color: #fff;   
            width:49%;
            margin-bottom: 5px;
            img{
                width: 100%;
                height: auto;
            }
            .commodity-center-t{
                width: 100%;
                height: 16px;
                text-align: center;
                line-height:16px;
            }
            .commodity-center-b{
                width: 100%;
                height: 16px;
                text-align: center;
                line-height:16px;
                color: #eb2323;
            }
        }
       } 
    }
    .van-goods-action{
        display: flex;
        justify-content: space-around;
        .van-button{
            width:30%;
        }
        .incoButton-t{
            width: 20%;
            color: #000;
            font-size: 20px;
        }
       
        .incoButton-b{
            width: 20%;
        }
    }
    .van-goods-action{
        z-index: 99;
    }
    .cars{
        padding:15px;
        .top{
            width: 100%;
            height: 90px;
            margin-bottom: 10px;
            .photo{
                float: left;
                width: 88px;
                height: 88px;
                margin-right: 15px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .top-r{
                float: left;
                width: 70%;
                .top-r-t{
                    width: 100%;
                    float: left;
                    line-height: 0;
                    text-align: right;
                }
                .top-r-c{
                    line-height: 0;
                    width: 100%;
                    float: left;
                    color:#b4282d;
                }
                .top-r-b{
                    width: 100%;
                    float: left;
                }
            }
        }
        .bottom{
            width: 100%;
        }
    }
    
    
}

    
</style>